步骤
1.添加 categories 页面
2.添加 categories 链接
3.修改 yilia 主题
4.多层分类
5.效果
6.参考文档
1 添加 categories 页面
1.1 新建 categories 页面
输入命令：
hexo new page categories
该命令在 source 目录下生成一个 categories 目录，categories 目录下有一个 index.md 文件。
1.2 修改 index.md 文件
---
title: 文章分类
date: 2018-10-19 11:22:21
type: "categories"
layout: "categories"
comments: false #关闭评论
---
2 添加 categories 链接
若主题为 yilia ，则打开 yilia/_config.yml ，修改为：
menu:
主页: /
相册: /
分类: /categories
3 修改 yilia 主题
3.1 新建yilia/layout/categories.ejs
<article class="article article-type-post show">
<header class="article-header">
<h1 class="article-title" itemprop="name">
<%= page.title %>
</h1>
</header>
<% if (site.categories.length){ %>
<div class="category-all-page article-type-post show">
<h3>共计 <%= site.categories.length %> 个分类</h3>
<ul class="category-list">
<% site.categories.sort('name').each(function(item){ %>
<% if(item.posts.length){ %>
<li class="category-list-item">
<a href="<%- config.root %><%- item.path %>" title="<%= item.name %>"><%= item.name %><sup>[<%= item.posts.length %>]</sup></a>
</li>
<% } %>
<% }); %>
</ul>
</div>
<% } %>
</article>
3.2 修改 yilia\source\main.0cf68a.css，将下面的内容添加进去
category-all-page {
margin: 30px 40px 30px 40px;
position: relative;
min-height: 70vh;
}
.category-all-page h2 {
margin: 20px 0;
}
.category-all-page .category-all-title {
text-align: center;
}
.category-all-page .category-all {
margin-top: 20px;
}
.category-all-page .category-list {
margin: 0;
padding: 0;
list-style: none;
}
.category-all-page .category-list-item-list-item {
margin: 10px 15px;
}
.category-all-page .category-list-item-list-count {
color: $grey;
}
.category-all-page .category-list-item-list-count:before {
display: inline;
content: " (";
}
.category-all-page .category-list-item-list-count:after {
display: inline;
content: ") ";
}
.category-all-page .category-list-item {
margin: 10px 10px;
}
.category-all-page .category-list-count {
color: $grey;
}
.category-all-page .category-list-count:before {
display: inline;
content: " (";
}
.category-all-page .category-list-count:after {
display: inline;
content: ") ";
}
.category-all-page .category-list-child {
padding-left: 10px;
}
4 多层分类
4.1 修改yilia/layout/categories.ejs为：
<article class="article article-type-post show">
<header class="article-header" style="border-bottom: 1px solid #ccc">
<h1 class="article-title" itemprop="name">
<%= page.title %>
</h1>
</header>
<% if (site.categories.length){ %>
<div class="category-all-page">
<h2>共计 <%= site.categories.length %> 个分类</h2>
<%- list_categories(site.categories, {
show_count: true,
class: 'category-list-item',
style: 'list',
depth: 2,
separator: ''
}) %>
</div>
<% } %>
</article>
4.2 修改自己的文章
---
title: Hexo yilia 添加目录页面
tags: Hexo yilia 添加目录
toc: true
categories: [Hexo,创建目录]
---
5 效果
如下图：
